<template>
  <view class="page">
    <view class="form">
      <view class="form-item">
        <view class="form-label required">标题</view>
        <view class="form-item-bd">
          <input v-model="model.title" type="text" placeholder="请输入标题" class="form-input" maxlength="64"
            :disabled="disabled" />
        </view>
      </view>
      <view class="form-item">
        <view class="form-label required">提醒类型</view>
        <view class="form-item-bd">
          <js-select v-model="model.remindType" dict-type="remindType" itemLabel="dictValue" itemValue="dictKey"
            placeholder="请选择提醒类型" :disabled="disabled"></js-select>
        </view>
      </view>
      <view class="form-label required">短信内容</view>
      <view class="form-item">
        <view class="form-item-bd">
          <textarea v-model="model.msgContent" placeholder="请输入短信内容" class="form-input textarea" rows="3"
            maxlength="500" :disabled="disabled" />
        </view>
      </view>
      <view class="form-item">
        <view class="form-label required">发送时间</view>
        <view class="form-item-bd">
          <view v-if="disabled">
            {{model.sendTime}}
          </view>
          <view v-else @click="show = true" style="width: 100%;">
            <view>{{model.sendTime == '' ? '请选择时间' : model.sendTime}}</view>
            <u-picker v-model="show" mode="time" :params="params" :disabled="disabled" @confirm="handleConfirm">
            </u-picker>
          </view>
        </view>
      </view>
      <view class="form-item">
        <view class="form-label required">状态</view>
        <view class="form-item-bd">
          <radio-group @change="e => model.status = e.detail.value">
            <label class="form-radio">
              <radio value="0" :checked="model.status === '0'" :disabled="disabled" />启用
            </label>
            <label class="form-radio">
              <radio value="1" :checked="model.status === '1'" :disabled="disabled" />禁用
            </label>
          </radio-group>
        </view>
      </view>
      <view v-if="model.createTime" class="form-item">
        <view class="form-label required">创建时间</view>
        <view class="form-item-bd">{{model.createTime}}</view>
      </view>
    </view>
    <view class="footer">
      <view class="form-button primary" @click="submit">保存</view>
      <view class="form-button" @click="cancel">取消</view>
    </view>
    <!-- <u-form class="form" :model="model" :rules="rules" ref="uForm" label-position="left">
      <u-form-item label="标题" prop="title" label-width="180" required>
        <u-input placeholder="请输入标题" v-model="model.title" type="text" maxlength="64" style="text-align: left;"
          :disabled="disabled"></u-input>
      </u-form-item>
      <u-form-item label="提醒类型" prop="remindType" label-width="180" required count>
        <js-select v-model="model.remindType" dict-type="remindType" itemLabel="dictValue" itemValue="dictKey"
          placeholder="请选择提醒类型" :disabled="disabled"></js-select>
      </u-form-item>
      <u-form-item label="短信内容" prop="msgContent" label-width="180" required count label-position="top">
        <u-input type="textarea" placeholder="请输入短信内容" v-model="model.msgContent" height="100" maxlength="500"
          :disabled="disabled" />
      </u-form-item>
      <u-form-item label="发送时间" prop="sendTime" label-width="180" required count>
        <view v-if="disabled">
          {{model.sendTime}}
        </view>
        <view v-else @click="show = true" style="width: 100%;">
          <view>{{model.sendTime==''?'请选择时间':model.sendTime}}</view>
          <u-picker v-model="show" mode="time" :params="params" @confirm="handleConfirm" disabled="disabled">
          </u-picker>
        </view>
      </u-form-item>
      <u-form-item label="状态" prop="status" label-width="180" required>
        <js-radio style="text-align: left;" v-model="model.status" dict-type="status_type" itemLabel="dictValue"
          itemValue="dictKey" :disabled="disabled"></js-radio>
      </u-form-item>
      <u-form-item label="创建时间" prop="createTime" label-width="180" v-if="model.createTime!=null">
        {{model.createTime}}
      </u-form-item>
    </u-form>
    <view style="display: flex;flex-direction: row;">
      <u-button class="btn" style="width: 50%;margin-right: 10rpx;" type="primary" @click="submit">保存</u-button>
      <u-button class="btn" style="width: 50%;" @click="cancel">取消</u-button>
    </view> -->
  </view>
</template>
<script>
  /**
   * Copyright (c) 2013-Now http://aidex.vip All rights reserved.
   */
  export default {
    data() {
      return {
        model: {
          id: '',
          title: '',
          remindType: '',
          msgContent: '',
          sendTime: '',
          status: '0'
        },
        params: {
          hour: true,
          minute: true,
          second: true
        },
        seatVar: ' ',
        show: false,
        labelPosition: 'left',
        disabled: true,
        rules: {
          title: [{
            required: true,
            message: '请输入标题',
            trigger: ['change', 'blur'],
          }],
          remindType: [{
            required: true,
            message: '请输入提醒类型',
            trigger: ['change', 'blur'],
          }],
          msgContent: [{
            required: true,
            message: '请输入短信内容',
            trigger: ['change', 'blur'],
          }],
          sendTime: [{
            required: true,
            message: '请选择发送时间',
            trigger: ['change', 'blur'],
          }],
          status: [{
            required: true,
            message: '请选择状态',
            trigger: ['change', 'blur'],
          }]
        },
      };
    },
    onLoad(params) {
      if (params.id) {
        this.$u.api.message.msgHolidyMsg.detail({
          id: params.id
        }).then(res => {
          Object.assign(this.model, res.data);
          this.model.status = res.data.status.toString();
          if (this.hasPermission('msgHolidyMsg_edit') && this.model.createUser == this.vuex_userId) {
            this.disabled = false;
          }
        });
      } else {
        this.disabled = false;
      }
    },
    onReady() {
      this.$refs.uForm.setRules(this.rules);
    },
    methods: {
      submit() {
        // this.$refs.uForm.validate(valid => {
        //   if (valid) {
        if (!this.model.title) {
          return this.$u.toast('请输入标题');
        }

        if (!this.model.remindType) {
          return this.$u.toast('请选择提醒类型');
        }

        if (!this.model.msgContent) {
          return this.$u.toast('请输入短信内容');
        }

        if (!this.model.sendTime) {
          return this.$u.toast('请选择发送时间');
        }

        if (!['0', '1'].includes(this.model.status)) {
          return this.$u.toast('请选择状态');
        }

        uni.showLoading({
          title: '提交中....'
        })
        
        this.$u.api.message.msgHolidyMsg.save(this.model).then(res => {
          uni.hideLoading();
          uni.showModal({
            title: '提示',
            content: res.msg,
            showCancel: false,
            success: function() {
              if (res.code == 200) {
                uni.navigateTo({
                  url: 'index'
                });
              }
            }
          });
        });
        //   } else {
        //     this.$u.toast('您填写的信息有误，请根据提示修正。');
        //   }
        // });
      },
      cancel() {
        uni.navigateTo({
          url: 'index'
        });
      },
      handleConfirm(e) {
        this.model.sendTime = e.hour + ":" + e.minute + ":" + e.second;
        this.show = false;
      }
    }
  };
</script>
<style lang="scss" scoped>
  .page {
    position: relative;
    height: 100vh;
    background: #f7f7f7;
  }

  .footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    padding: 0 24rpx 32rpx;
  }

  .form {
    height: 100%;
    padding: 32rpx 24rpx;
  }

  .form-item {
    display: flex;
    align-items: center;
    border-radius: 8rpx;
    padding: 32rpx 24rpx;
    margin-bottom: 32rpx;
    background: #fff;
  }

  .form-item-bd {
    display: flex;
    align-items: center;
    flex: 1;
    line-height: 28rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #999;
  }

  .form-label {
    font-weight: 700;
    font-size: 28rpx;
    color: #000;

    &.required::before {
      content: '*';
      color: #D43030;
    }

    &+.form-item {
      margin-top: 24rpx;
    }

    &+.form-item-bd {
      margin-left: 40rpx;
    }
  }

  .form-input {
    width: 100%;
    height: 28rpx;
    line-height: 28rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #999;

    &.textarea {
      height: 160rpx;
    }
  }

  .form-radio {
    display: inline-flex;
    align-items: center;
    margin-right: 40rpx;
    font-size: 28rpx;
    color: #666;

    radio {
      margin-right: 12rpx;
    }
  }

  .form-button {
    width: 100%;
    height: 96rpx;
    border-radius: 48rpx;
    line-height: 96rpx;
    text-align: center;
    font-size: 32rpx;
    font-weight: 500;
    color: #999;
    background: #fff;

    &.primary {
      color: #fff;
      background: #3989FC;
    }

    &+.form-button {
      margin-left: 24rpx;
    }
  }
</style>